
<template>
  <div>
    <transition name="right">
      <div v-show="modelShow" :style="{width:width}" class="side-modal-box">
        <div class="modal-header">
          <span class="back" @click="handlerClose">
            <i class="el-icon-back" />
            返回
          </span>
          <el-tooltip :content="title" class="item" effect="dark" placement="top">
            <span class="title">{{ title }}</span>
          </el-tooltip>
          <div class="tool-right">
            <slot name="foot" />
            <el-button @click="handlerClose">取消</el-button>
          </div>
        </div>
        <div class="transition-box modal-body scrollbar-no-width">
          <slot name="body" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    show: { type: Boolean, default: false }, // 隐藏
    title: { type: [String], default: '标题' }, // 选中节点ID集合
    width: { type: [String], default: '600px' } // 选中节点ID集合
  },
  data() {
    return {
      modelShow: false
    }
  },
  watch: {
    title: {
      immediate: true, // 深度监听
      handler(newVal, oldVal) {}
    },
    show: function(val) {
      this.modelShow = val
    }
  },
  created() {
    this.modelShow = this.show
  },
  methods: {
    handlerClose() {
      this.modelShow = false
      this.$emit('close')
    }
  }
}
</script>
<style>
.right-enter,
.right-leave-to {
  transform: translate3d(100%, 0, 0);
}
.right-leave,
.right-enter-to {
  transform: translate3d(0, 0, 0);
}
.right-enter-active,
.right-leave-active {
  transition: all 0.2s;
}
.side__modal__box{
  z-index: 1000;
}
</style>
